<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECharts v5.1.0 Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<h2 id="wait">Loading lib....</h2>

		<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

		<div id="chart" style="width: 1920px; height: 600px;"></div>

		<script>
			// based https://github.com/apache/incubator-echarts/blob/d4bf86c963feaa12d83e0d3bd9f9b2b6249233d7/test/sample-compare.html

			function round2(val) {
				return Math.round(val * 100) / 100;
			}

			function round3(val) {
				return Math.round(val * 1000) / 1000;
			}

			function prepData(packed) {
				console.time("prep");

				// epoch,idl,recv,send,read,writ,used,free

				const numFields = packed[0];
				packed = packed.slice(numFields + 1);

				let data = new Float64Array(packed.length / numFields * 4);

				let off = 0;
				let date = packed[0];
				for (let i = 0, j = 0; i < packed.length; i += numFields, j++) {
					date += 1;
					data[off++] = date * 60 * 1000;
					data[off++] = round3(100 - packed[i + 1]);
					data[off++] = round2(100 * packed[i + 5] / (packed[i + 5] + packed[i + 6]));
					data[off++] = packed[i + 3];
				}
				console.timeEnd("prep");

				return data;
			}

			function makeChart(data) {
				console.time("chart");
				let dom = document.getElementById("chart");

				let myChart = echarts.init(dom, null, {
					width: 1920,
					height: 600
				});

				let opts = {
					animation: false,
					dataset: {
						source: data,
						dimensions: ["date", "cpu", "ram", "tcpout"]
					},
					tooltip: {
						trigger: "axis",
						transitionDuration: 0,
					},
					legend: {},
					grid: {
						containLabel: true,
						left: 0,
						top: 50,
						right: 0,
						bottom: 30
					},
					xAxis: {
						type: "time"
					},
					yAxis: [
						{
							type: "value",
							axisLabel: {
								formatter: "{value} %"
							}
						},
						{
							type: "value",
							axisLabel: {
								formatter: "{value} MB"
							}
						}
					],
					series: [
						{
							name: "CPU",
							z: 0,
							type: "line",
							showSymbol: false,
							sampling: "lttb",
							lineStyle: { width: 1 },
							emphasis: {
								disabled: true,
							},
							silent: true,
							encode: {
								x: "date",
								y: "cpu"
							}
						},
						{
							name: "RAM",
							z: 1,
							type: "line",
							yAxisIndex: 1,
							showSymbol: false,
							sampling: "lttb",
							lineStyle: { width: 1 },
							emphasis: {
								disabled: true,
							},
							encode: {
								x: "date",
								y: "ram"
							}
						},
						{
							name: "TCP Out",
							z: 2,
							type: "line",
							yAxisIndex: 1,
							showSymbol: false,
							sampling: "lttb",
							lineStyle: { width: 1 },
							emphasis: {
								disabled: true,
							},
							encode: {
								x: "date",
								y: "tcpout"
							}
						}
					]
				};

				myChart.setOption(opts, {
					notMerge: true
				});

				wait.textContent = "Done!";
				console.timeEnd("chart");
			}

			let wait = document.getElementById("wait");
			wait.textContent = "Fetching data.json (2.07MB)....";
			fetch("data.json").then(r => r.json()).then(packed => {
				wait.textContent = "Rendering...";
				let data = prepData(packed);
				setTimeout(() => makeChart(data), 0);
			});
		</script>
	</body>
</html>